<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户设置</title>
    <link rel="stylesheet" href="Account_Settings.css">
    <script src="A_S.js"></script>
    <style>
        .show {
            display: flex;
        }

        .hide {
            display: none;
        }

        .box {
            align-items: center;
            justify-content: center;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.80);
            top: 0;
            left: 0;
            position: fixed;
        }

        .box1 {
            background: #FFFFFF;
            border-radius: 10px;
            width: 480px;
            height: 275px;
            flex-direction: column;
            background-color: #ffffff;
        }

        .box1 .box1_s {
            margin-bottom: 20px;
            text-indent: 1em;
            line-height: 50px;
            border-radius: 10px;
            width: 100%;
            height: 50px;
            background-color: #f7f7f7;
        }
        .file {
        position: absolute;
        top: 15px;
        right: 15px;
        height: 39px;
        width: 78px;
        opacity: 0;
        }
        .file:hover{
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="herder_f">
        <div class="herder_s1">
            <img src="./imags/map.png" alt="">
            <span>乐山</span>
            <a>切换城市</a>
            <a href="Personal_Center.html">name</a>
            <a href="Login.html">退出</a>
        </div>
        <div class="herder_s2">
            <a href="#">手机app</a>
            <a href="Personal_Center.html">我的外卖</a>
        </div>
    </div>
    <div class="herder_com">
        <div class="herder_com_s1">
            <img src="./imags/logo.png" alt="">
            <div class="herder_com_s2"> 小王外卖</div>
        </div>
        <div class="find">
            <form action="">
                <input type="text" required maxlength="18" placeholder="搜索关键词">
                <button type="submit" style="  
                        cursor: pointer;
                        background-color: orange;
                        position: absolute;
                        left: 934px;
                        top: 75px;">
                <img src="./imags/find.png" alt="" style="height: 34px;"></button>
            </form>

        </div>
    </div>
    <div class="body">
        <div class="left">
            <ul>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">我的收藏</a></li>
                <li><a href="#">个人信息设置</a></li>
            </ul>
        </div>
        <div class="right">
            <div class="right_3">
                <div style="display: flex;
                flex-direction: column;
                justify-items: center;
                position: relative;">
                    <p style="font-size:20px ;margin-top: 10px;">个人信息</p>
                    <p style="font-size: 14px;color: #666666;">账户设置</p>
                </div>
                <div>
                    <div class="uni1">
                        <span style="font-size: 18px;">头像</span>
                    </div>
                    <div style="margin-left: 20px;">
                        <img src="./imags/th.jpg" alt="" style="width: 50px;height: 50px;border-radius: 100%;">
                    </div>
                    <div>
                        
                        <button type="submit" class="revise">修改</button>
                        <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
                    </div>
                </div>
                <div>
                    <div class="uni1">
                        <span style="font-size: 18px; ">昵称</span>
                    </div>
                    <div style="display: flex;align-items: center;margin-left: 20px;color:#666666" value></div>
                    <div>
                        <button type="submit" id="bt1" class="revise" onclick="fun2()">修改</button>
                    </div>
                </div>
                <div>
                    <div class="uni1">
                        <span style="font-size: 18px;">密码</span>
                    </div>
                    <div style="display: flex;align-items: center;margin-left: 20px;color:#666666">
                        <p>********</p>
                    </div>
                    <div>
                        <button type="submit" class="revise" onclick="fun4()">修改</button>
                    </div>
                </div>
                <div>
                    <div class="uni1">
                        <span style="font-size: 18px;">收货地址</span>
                    </div>
                    <div style="display: flex;align-items: center;margin-left: 20px;color:#666666">红星村</div>
                    <div>
                        <button type="submit" class="revise" onclick="fun6()">修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="bottom_1"></div>
    <div class="bottom_2"></div>


  <!-- 第三个盒子 -->
  <form action="./Login.html" ,method="post" target="myiframe">
    <div class="boxc box hide" id="box">
        <div class="box1 bt1a show">
            <div class="box1_s show " style=" justify-content: space-between;">
                <div class="box1_s_1  show">
                   收货地址
                </div>
                <div class=" show" style="cursor: pointer;
            width: 55px;
            position: relative;
            top: 10px;" onclick="fun5()">
                    <img src="./imags/cha.png" alt="" style="height: 30px;">
                </div>
            </div>

            <div class=" show"
                style="justify-content: center;flex-direction: column;height: 50%;margin-top: -16px;padding-left: 13px;">
                <div class="show" style="    top: -20px;
                position: relative;
                height: 20%;">
                    <div class="show" style="width: 30%;justify-content: right;">联系人</div>
                    <input type="text" required maxlength="18" style="
                padding-left: 2px;
                top: -2px;
                left: 43px;
                width: 30%;
                height: 28px;
                position: relative;">
                </div>
                <div class="show" style="position: relative;
            /* margin-bottom: 0px; */
            height: 20%;
            ">
                    <div class="show" style="width: 30%;justify-content: right;">手机号码</div>
                    <input type="text" required maxlength="18" style="
                padding-left: 2px;
                top: -2px;
                left: 43px;
                width: 30%;
                height: 28px;
                position: relative;">
                </div>
                <div class="show" style="position: relative;
                top:15px;
            /* margin-bottom: 0px; */
            height: 20%;
            ">
                    <div class="show" style="width: 30%;justify-content: right;">收货地址</div>
                    <input type="text" required maxlength="18" style="
                padding-left: 2px;
                top: -2px;
                left: 43px;
                width: 30%;
                height: 28px;
                position: relative;">
                </div>
            </div>
            <div style="position: relative;text-align: center;height: 70px;line-height: 70px;">
                <span type="submit" onclick="fun5()" style=" 
                 border: 1px solid black;
            line-height: 40px;
            top: 14px;
left: 115px;
position: absolute;
        cursor: pointer;
        width: 100px;
        margin-right: 10px;
        height: 43px;
        background-color: orange;
        border-radius: 20px;
        ">确认</span>
                <span type="submit" onclick="fun5()" style=" 
         border: 1px solid black;
           line-height: 40px;
         top: 14px;
        left: 250px;
        position: absolute;
        cursor: pointer;
        width: 100px;
        margin-right: 10px;
        height: 43px;
        background-color: orange;
        border-radius: 20px;
     ">取消</span>
            </div>
        </div>

    </div>

    </div>

    </div>
</form>

<!-- 第二个盒子 -->
<form action="./Login.html" ,method="post" target="myiframe">
    <div class="boxb box hide" id="box">
        <div class="box1 bt1a show">
            <div class="box1_s show " style=" justify-content: space-between;">
                <div class="box1_s_1  show">
                    修改密码
                </div>
                <div class=" show" style="cursor: pointer;
            width: 55px;
            position: relative;
            top: 10px;" onclick="fun3()">
                    <img src="./imags/cha.png" alt="" style="height: 30px;">
                </div>
            </div>

            <div class=" show"
                style="justify-content: center;flex-direction: column;height: 50%;margin-top: -16px;padding-left: 13px;">
                <div class="show" style="height: 20%;">
                    <div class="show" style="width: 30%;justify-content: right;">新的密码</div>
                    <input type="text" required maxlength="18" style="
                padding-left: 2px;
                top: -2px;
                left: 43px;
                width: 30%;
                height: 28px;
                position: relative;">
                </div>
                <div class="show" style="position: relative;
            /* margin-bottom: 0px; */
            height: 20%;
            top: 20px;">
                    <div class="show" style="width: 30%;justify-content: right;">重复密码</div>
                    <input type="text" required maxlength="18" style="
                padding-left: 2px;
                top: -2px;
                left: 43px;
                width: 30%;
                height: 28px;
                position: relative;">
                </div>
            </div>
            <div style="position: relative;text-align: center;height: 70px;line-height: 70px;">
                <span type="submit" onclick="fun3()" style=" 
                 border: 1px solid black;
            line-height: 40px;
            top: 14px;
left: 115px;
position: absolute;
        cursor: pointer;
        width: 100px;
        margin-right: 10px;
        height: 43px;
        background-color: orange;
        border-radius: 20px;
        ">确认</span>
                <span type="submit" onclick="fun3()" style=" 
         border: 1px solid black;
           line-height: 40px;
         top: 14px;
        left: 250px;
        position: absolute;
        cursor: pointer;
        width: 100px;
        margin-right: 10px;
        height: 43px;
        background-color: orange;
        border-radius: 20px;
     ">取消</span>
            </div>
        </div>

    </div>

    </div>

    </div>
</form>
<!-- 第一个盒子 -->
<form action="./Login.html" ,method="post" target="myiframe">
    <div class="boxa box hide" id="box">
        <div class="box1 bt1a show">
            <div class="box1_s show " style=" justify-content: space-between;">
                <div class="box1_s_1  show">
                    修改昵称
                </div>
                <div class=" show" style="cursor: pointer;
            width: 55px;
            position: relative;
            top: 10px;" onclick="fun1()">
                    <img src="./imags/cha.png" alt="" style="height: 30px;">
                </div>
            </div>

            <div class=" show"
                style="justify-content: center;flex-direction: column;height: 50%;margin-top: -16px;padding-left: 13px;">
                <div class="show" style="height: 20%;">
                    <div class="show" style="width: 30%;justify-content: right;">当前昵称</div>
                    <span class="show" style="width: 25%;justify-content: right;">cscscscscs</span>
                </div>
                <div class="show" style="position: relative;
            /* margin-bottom: 0px; */
            height: 20%;
            top: 20px;">
                    <div class="show" style="width: 30%;justify-content: right;">新的昵称</div>
                    <input type="text" required maxlength="18" style="
                padding-left: 2px;
                top: -2px;
                left: 43px;
                width: 30%;
                height: 28px;
                position: relative;">
                </div>
            </div>
            <div style="position: relative;text-align: center;height: 70px;line-height: 70px;">
                <span type="submit" onclick="fun1()" style=" 
            line-height: 40px;
            top: 14px;
left: 115px;
position: absolute;
        cursor: pointer;
        width: 100px;
        margin-right: 10px;
        height: 43px;
        background-color: orange;
        border-radius: 20px;
        border: 1px solid black;
        ">确认</span>
                <span type="submit" onclick="fun1()" style=" 
                 border: 1px solid black;
             line-height: 40px;
         top: 14px;
left: 250px;
position: absolute;
     cursor: pointer;
     width: 100px;
     margin-right: 10px;
     height: 43px;
     background-color: orange;
     border-radius: 20px;
     ">取消</span>
            </div>
        </div>

    </div>

    </div>

    </div>
</form>
</body>

</html>